<template>
  <div class="container">
    <!-- 知识点：组件标签里面的标签体内容都是解析之后，才传递到组件里面的 -->
    <!-- 如果该组件写了样式，就就将样式解析之后在传递到组件里面 -->
    <!-- 如果该组件没有写样式（解析的时候就没有样式），那么就是直接使用传递到的这个组件里面的样式也可以进行解析 -->

    <!-- 引入分类组件，可以在组件标签里面写标签体内容（其实就是可以写html片段） -->
    <!-- 其中title、:listData就是组件标签的属性 -->

    <!-- 目前场景：App组件是Category 组件的使用者，且数据现在存在App组件里面的。 -->
    <!-- 此时，需要将Category里面的data数据，传递到App这个组件里面。 -->
    <Category title="游戏">
      <!-- 
        作用域插槽：如果想要从Category组件获取到数据，且传递到App这个组件的话，就需要
        使用template标签，然后scope属性值获取到的是一个对象，对象里面包含的是传递的值。
       -->
      <template scope="atguigu">
        <!-- 
           {{atguigu}} 该插值语法输出是：{ "games": [ "红色警戒", "穿越火线", "劲舞团", "超级玛丽" ] } 
           此处是对象的话，是可以传递多个值的，这样是对象比较方便。
        -->
        <ul>
          <li v-for="(item, index) in atguigu.games" :key="index">{{item}}</li>
        </ul>
        <h4>我是Category组件传递到App组件的：{{atguigu.msg}}</h4>
      </template>
    </Category>

    <Category title="游戏">
      <!-- 解构赋值形式，直接将games 解构出来，那么就可以直接使用了 -->
      <template scope="{games}">
        <ol>
          <li style="color: red;" v-for="(item, index) in games" :key="index">{{item}}</li>
        </ol>
      </template>
    </Category>

    <Category title="游戏">
      <!-- 此处可以将scope 改成slot-scope，slot-scope是新的api语法、scope是老的api语法。 -->
      <template slot-scope="{games}">
        <h4 style="color: rgb(65, 45, 193);" v-for="(item, index) in games" :key="index">{{item}}</h4>
      </template>
    </Category>

  </div>
</template>

<script>
  import Category from './components/Category.vue';

  export default {
    name: 'App',
    components: {
      Category: Category
    }

  }
</script>

<style scoped>
  .container,
  .foot {
    /* 弹性盒模型 */
    display: flex;
    /* 主轴的对齐方式 */
    justify-content: space-around;
  }

  h4 {
    text-align: center;
  }
</style>